<template>
	<view class="navigation"  :style="{'background-color':titleColor}">
		<view class="container">
			<view class="title" :style="{'color':textColor,'text-align': textAlign}" @tap="$emit('title-tap')">
				<slot>{{ title }}</slot>
			</view>
			<view class="left-bar" @tap="leftBarTap">
				<slot name="leftBar">
					<view v-if="defaultButton == 'back'" class="bar_panel" :style="{'color':barColor}">
						<text class="bar-icon icon-left nursing-icon iconfanhui" @tap="backTap"></text>
					</view>
					<view v-if="defaultButton == 'last'" class="bar_panel" :style="{'color':barColor}">
						<text class="bar-icon icon-left" @tap="lastTap">《</text>
					</view>
				</slot>
			</view>
			<view class="right-bar" @tap="rightBarTap" :style="{'color':barColor}"><slot name="rightBar"></slot></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: String,
		// 'home' || 'back'
		defaultButton: {
			type: String,
			default() {
				return 'home';
			}
		},
		textAlign: {
			type: String,
			default() {
				return 'center';
			}
		},
		textColor: {
			type: String,
			default() {
				return '#ffffff';
			}
		},
		barColor: {
			type: String,
			default() {
				return '#ffffff';
			}
		},
		titleColor: {
			type: String,
			default() {
				return 'rgba(255,255,255,0)';
			}
		}
	},
	methods: {
		leftBarTap () {
			if (this.defaultButton == 'back') {
				uni.navigateBack();
			} else {
				this.$emit("saved");
			}
		},
		rightBarTap(){
			this.$emit('rightBarTap');
		},
		backTap() {
			console.log('backTap');
		},
		lastTap() {
			console.log('lastTap');
		}
	}
};
</script>

<style lang="stylus" scoped>
.navigation {
	width: 100vw;
	padding-top: var(--status-bar-height); // 空出手机端状态栏的高度
	z-index 9999;
	.container {
		width: 100%
		display: flex;
		align-items: center;
		height: 120rpx;
		position relative;
		.title {
			padding: 0px 30rpx;
			box-sizing: border-box;
			width:100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
			text-align: center;
		}
		.left-bar {
			position absolute;
			left 0rpx;
			.bar_panel {
				font-size: 26rpx; 
				color: #FFFFFF;
				padding: 30rpx;
				box-sizing border-box;
				.nursing-icon {
					font-size 26rpx;
				}
			}
		}
	}
}
	
</style>
